<template>
  <div>
    <h1>动态组件</h1>
    <component v-for="item in apps" :is="item.app"></component>
  </div>
</template>

<script>
import Vue from "vue";

export default {
  name: "side-bar",
  data() {
    return {
      btns: ['btn-a', 'btn-b'],
      apps: []
    }
  },

  created() {
    //方案一，全局组件（不推荐）
    // this.btns.forEach(app => {
    //   Vue.component(app, res => require([`@/dir/${app}.vue`], res))
    // })

    //方案二，可行，但不能传参
    this.btns.forEach(app => {
      console.log("app:", app)
      this.apps.push({app: require(`./dir/${app}.vue`).default})
    })
    //报错：Failed to mount component: template or render function not defined.
    console.log("apps:", JSON.stringify(this.apps))
  },
  methods: {}
}
</script>

<style scoped>

</style>
